<template>
  <div class="page" ref="gun" style="background: #fff;">
    <div class="top_div">
      <div class="h10"></div>
      <div class="ttt flex_center">
        <div class="title flex_ac" @click="$back() ">
          <van-icon class="ml6" name="arrow-left" size="26" color="#000"/>
          <div class="">乡品</div>
        </div>
        <div class="type_div flex_ac flex_center">
          <div class="type_item" :class="type_id==1?'type_item_a':''" @click="type_id=1">电商</div>
          <div class="type_item" :class="type_id==2?'type_item_a':''" @click="type_id=2">好店</div>
        </div>
      </div>
      <div class="h5"></div>
      <div class="top_search flex_ac">
        <img src="~@/assets/img/product/search.png" alt="">
        <input type="text" placeholder="请输入关键字" v-model="keywords"/>
        <div class="ss" @click="init">搜索</div>
      </div>
      <van-tabs @click="changeClass" v-model="class_index" title-active-color="#FA871E" title-inactive-color="#808080" line-width="20px">
        <van-tab v-for="i,k in type_id==1?classList:classList1" :title="i.name"></van-tab>
      </van-tabs>
    </div>
    
    <van-swipe @change="changeSwiper" ref="swiper" class="swipe" :loop="false"  :show-indicators="false">
      <van-swipe-item 
        class="list_div"
        style="height: calc(100vh - 8rem)"  
        v-for="x,k in type_id==1?classList.length:classList1.length" :key="k">
        <van-list
          v-show="k==class_index"
          v-model="isLoad"
          :finished="isfinish[class_index]"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="getMore()"
        >
          <template v-for="i1,k1 in listAll[k]">
            <proList1 v-if="type_id==1" :i="i1":key="k1+'c'"/>
            <proList2 v-if="type_id==2" :i="i1":key="k1+'d'"/>
          </template>
        </van-list>
        <template v-if="k!=class_index" v-for="i1,k1 in listAll[k]">
          <proList1 v-if="type_id==1" :i="i1" :key="k1+'a'"/>
          <proList2 v-if="type_id==2" :i="i1" :key="k1+'b'"/>
        </template>
      </van-swipe-item>
    </van-swipe>

  </div>
</template>
<script>
import { parklist } from '@/api/api'
import { debounce } from '@/utils/utils'

import proList1 from '@/components/proList1.vue'
import proList2 from '@/components/proList2.vue'
export default {
  data() {
    return {
      type_id:1,
      keywords: '',
      classList: [
        {name:'推荐商家',id:'0'},
        {name:'内衣配饰',id:'1'},
        {name:'母婴童装',id:'2'},
        {name:'家电',id:'3'},
        {name:'家居家装',id:'4'},
        {name:'居家必备',id:'5'},
      ],
      classList1: [
        {name:'推荐门店',id:'0'},
        {name:'美食分类',id:'1'},
        {name:'日用百货',id:'2'},
        {name:'商超',id:'3'},
        {name:'家电五金',id:'4'},
        {name:'居家必备',id:'5'},
      ],
      class_index: 0,

      isLoad: true,
      isfinish: [false,false,false,false,false,false,false,false,false,false], //是否加载
      page: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
      total: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
      listAll:[[],[],[],[],[],[],[],[],[],[]],
    }
  },
  components: {
    proList1,
    proList2,
  },
  created() {
    this.getList()
  },
  watch: {
    type_id: function () {
      this.isLoad =  false
      this.isfinish = [false,false,false,false,false,false,false,false,false,false]
      this.page = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
      this.total = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
      this.listAll = [[],[],[],[],[],[],[],[],[],[]]
      this.changeClass(0)
    },
    class_index: function (val) { 
      this.listAll.forEach((i, k) => {
        if (k > (val + 1) || k < (val - 1)) {
          this.listAll[k] = []
        }
      });
      this.$forceUpdate()
    }
  },
  methods: {
    init() {
      this.isfinish[this.class_index] = false
      this.isLoad = true
      this.page[this.class_index] = 1
      this.listAll[this.class_index] = []
      this.$forceUpdate()
      this.getList()
    },
    getList() {
      if (this.isfinish[this.class_index]) {
        return
      }
      let data = {
        page: this.page[this.class_index],
        keywords: this.keywords,
        // type_id: this.type_id==1?this.classList[this.class_index].id:this.classList1[this.class_index].id,
      }
      parklist({ ...data }).then(res => {
        this.isLoad = false
        if (this.page[this.class_index] == 1) {
          this.listAll[this.class_index] = res.data.data
        } else {
          this.listAll[this.class_index].push(...res.data.data)
        }
        this.$forceUpdate()
        this.total[this.class_index] = res.data.total
        if (this.listAll[this.class_index].length >= res.data.total) {
          this.isfinish[this.class_index] = true
        }
      })
    },
    getMore(k) {
      if (k==this.class_index&&(this.isfinish[this.class_index]||this.listAll[this.class_index].length==0)) {
        return
      }
      this.page[this.class_index] += 1
      this.getList()
    },
    changeClass(val) {
      this.$refs.swiper.swipeTo(val)
      if (this.listAll[this.class_index].length == 0) {
        this.init()
      }
    },
    changeSwiper(index) {
      this.class_index = index
      if (this.listAll[this.class_index].length == 0) {
        this.init()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page{
  height: 100%;
  overflow: auto;
}
.top_div{
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #F9EFDE 0%, rgba(255,254,253,0.6) 100%);
  &::v-deep .van-tabs__nav{
    background: #0000;
  }
  &::v-deep .van-tabs__line{
    background: #FA871E;
  }
  &::v-deep .van-tabs__wrap{
    height: 32px;
  }
  &::v-deep .van-tab--active{
    font-weight: 600;
  }
  .title{
    position: absolute;
    left: 0px;
    font-weight: 500;
		font-size: 18px;
		color: #000;
  }
  .top_search{
    margin: 10px;
    height: 35px;
    background: #FFFFFF;
    box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
    border-radius: 18px;
    color: #999999;
    img{
      height: 15px;
      width: 15px;
      margin-right: 10px;
      margin-left: 15px;
    }
    input{
      border: none;
      width: calc(100% - 60px);
      color: #333;
      font-size: 14px;
    }
    .ss{
      width: 60px;
      height: 28px;
      text-align: center;
  		background: linear-gradient(-62deg, #FA871E, #F9B87D);
      margin-right: 6px;
      border-radius: 15px;
      color: #fff;
      line-height: 28px;
      font-size: 12px;
    }
  }

  .ttt{
    position: relative;
  }
  .type_div{
    width: 95px;
    height: 26px;
    background: #FFFFFF;
    box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
    border-radius: 13px;
    .type_item{
      width: 45px;
      height: 22px;
      border-radius: 12px;
      font-size: 13px;
      color: #000000; 
      text-align: center;
      line-height: 22px;
    }
    .type_item_a{
      background: #FA871E;
      font-weight: bold;
      font-size: 14px;
      color: #FFFFFF;
    }
  }
}
</style>